<template>
	<view>
		scroll-view 纵向
		<scroll-view class="scrollView" scroll-y>
			<view class="box1">scroll-view子元素1</view>
			<view class="box1">scroll-view子元素2</view>
			<view class="box1">scroll-view子元素3</view>
			<view class="box1">scroll-view子元素4</view>
			<view class="box1">scroll-view子元素5</view>
		</scroll-view>
	</view>
	<view>
		scroll-view 横向
		<scroll-view class="scrollView" scroll-x>
			<view class="box2">scroll-view子元素1</view>
			<view class="box2">scroll-view子元素2</view>
			<view class="box2">scroll-view子元素3</view>
			<view class="box2">scroll-view子元素4</view>
			<view class="box2">scroll-view子元素5</view>
		</scroll-view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
	.scrollView {
		width: 80%;
		height: 500px;
		border: 1px solid red;
		white-space: nowrap;//让元素单行显示
		.box1 {
			width: 100%;
			height: 100%;
			margin: 5px;
		}
		.box1:nth-child(2n) {
			background-color: red;
		}		
		.box1:nth-child(2n-1) {
			background-color: blue;
		}
		.box2 {
			width: 100%;
			height: 100%;
			margin: 5px;
			display: inline-block;//当横向显示要设置为行内块元素
		}
		.box2:nth-child(2n) {
			background-color: cornflowerblue;
		}		
		.box2:nth-child(2n-1) {
			background-color: orange;
		}
	}       
</style>
